<template>
	<view class="box">
		<uNavbar title="系统通知" bgColor="#262241"></uNavbar>
		<!-- 		<view class="tab-nav">
			<view class="tab-list-item" v-for="item in toggleList" :key="item.id" @click="clickToggleHandle(item)">
				<view :class="{ active: item.select}" class="text">{{ item.label }}</view>
			</view>
		</view> -->
		<!--我接收的 -->
		<view class="main" v-for="item in orderlist" :key="item.id" @click="go(item.type,item.details_id)">
			<view class="other" v-if="item.type==4||item.type==5">
				<view class="main_top">
					<text class="textone">{{item.name}}</text>
					<text class="texttwo">{{item.create_time}}</text>
				</view>
				<view class="word">
					{{item.content}}
				</view>
			</view>
			<view v-else>
				<view class="main_top">
					<text class="textone">{{item.name}}</text>
					<text class="texttwo">{{item.create_time}}</text>
				</view>
				<view class="z">
					<image :src="item.order_data.image" mode="aspectFill"></image>
					<view class="wrap">
						<view class="name">
							<view class="text3">{{item.order_data.name}}</view> <text>×{{item.order_data.number}}</text>
						</view>
						<view class="content">
							{{item.content}}
						</view>

					</view>

				</view>
				<view class="line">

				</view>
				<view class="main_top" style="margin-top: 10rpx;padding-bottom: 30rpx;">
					<text class="textone">查看详情</text>
					<uni-icons style="margin-right: 20rpx;" type="right" color="#A6A5AF"></uni-icons>
				</view>
			</view>

		</view>
		<noDatas :xxxList="orderlist" :status="status"></noDatas>
		<view style="width: 750rpx;height: 40rpx;">

		</view>
	</view>

</template>

<script>
	import {
		messageslist
	} from "../../api/setting.js"
	export default {
		data() {
			return {
				orderlist: [],
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		onLoad() {
			this.getorderList()
		},
		methods: {
			getorderList() {
				messageslist({
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.orderlist = this.page == 1 ? list : this.orderlist.concat(list);
						console.log(this.orderlist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}

				})
			},
			go(type, details_id) {
				if (type == 1) {
					uni.navigateTo({
						url: `/pagesMy/myorder/paid?id=${details_id}`
					})
				}
				if (type == 2) {
					uni.navigateTo({
						url: `/pagesMy/marketorder/marketdetail?id=${details_id}`
					})
				}
				if (type == 3) {
					uni.navigateTo({
						url: `/pagesMy/marketorder/marketorderdetail?id=${details_id}`
					})
				}
				if(type==6){
					uni.navigateTo({
						url: `/pagesMy/proporder/proporderdetailtwo?id=${details_id}&status=2`
					})
				}
				if(type==7){
					uni.navigateTo({
						url: `/pagesMy/proporder/proporderdetail?id=${details_id}`
					})
				}
			}

		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getorderList()
			}
		},

	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		// height: 100vh;
		background-color: #262241;
		position: relative;
	}

	.main_top {
		width: 670rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 28rpx;

		// height: 50rpx;
		.textone {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			margin-left: 28rpx;
		}

		.texttwo {
			font-weight: 300;
			font-size: 28rpx;
			color: #A6A5AF;
			margin-right: 30rpx;
		}
	}

	.main {
		width: 690rpx;
		// height: 362rpx;
		background: #3C2F65;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		.main_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 28rpx;

			// height: 50rpx;
			.textone {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;

				margin-left: 28rpx;
			}

			.texttwo {
				font-weight: 300;
				font-size: 28rpx;
				color: #A6A5AF;
				margin-right: 30rpx;
			}
		}

		.z {
			margin-left: 28rpx;
			margin-top: 38rpx;
			height: 152rpx;
			display: flex;

			>image {
				width: 152rpx;
				height: 152rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}

			.wrap {
				height: 152rpx;
				width: 500rpx;

				.name {
					width: 460rpx;
					height: 50rpx;
					display: flex;
					justify-content: space-between;
					margin-left: 32rpx;
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;

					.text3 {

						width: 350rpx;
						white-space: nowrap;
						/* 文本不换行 */
						overflow: hidden;
						/* 溢出隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号 */
					}
				}

				.content {
					width: 448rpx;
					// height: 56rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 28rpx;
					color: #A6A5AF;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 32rpx;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

			}

		}
	}

	.line {
		margin: 0 auto;
		margin-top: 36rpx;
		width: 632rpx;
		height: 0rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.08);
	}

	.other {
		width: 500rpx;
	}

	.word {
		width: 670rpx;
		// height: 200rpx;
		// line-height: 200rpx;
		// text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #A6A5AF;
		margin-left: 30rpx;
		padding: 20rpx 0 20rpx 0;
	}
</style>